<template>
  <el-container>
    <div>
      <el-dialog title="出库质检员你好，请先登录：" width="90%" append-to-body :visible.sync="dialogFormVisible">
        <div slot="footer" class="dialog-footer">
          <el-form
            ref="vForm"
            :model="formData"
            :rules="rules"
            label-position="left"
            label-width="80px"
            size="medium"
            @submit.native.prevent
          >
            <el-row>
              <el-col :span="22" :offset="1" class="grid-cell">
                <div class="static-content-item">
                  <el-alert
                    title="开始进行身份核验："
                    type="warning"
                    description="请仔细核对信息"
                    :closable="false"
                    :center="true"
                    :show-icon="true"
                    effect="light"
                  />
                </div>
              </el-col>
            </el-row>
            <div class="static-content-item">
              <el-divider direction="horizontal" content-position="right">我是可爱的分割线</el-divider>
            </div>
            <el-row>
              <el-col :span="22" :offset="1" class="grid-cell">
                <el-form-item label="名字：" prop="uName" class="required">
                  <el-input
                    v-model="formData.uName"
                    type="text"
                    placeholder="请输入名字"
                    clearable
                    :show-word-limit="true"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" :offset="1" class="grid-cell">
                <el-form-item label="口令：" prop="uKey" class="required">
                  <el-input
                    v-model="formData.uKey"
                    type="password"
                    placeholder="请输入口令"
                    clearable
                    :show-word-limit="true"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-button @click="cancel">稍 后</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div style="margin: 0 auto;">
      <!--      水平居中-->
      <el-form
        ref="vForm1"
        :model="formData1"
        :rules="rules1"
        label-position="top"
        label-width="80px"
        size="medium"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="24" class="grid-cell">
            <div class="static-content-item">
              <el-alert
                title="请对下述产品信息进行核对"
                type="success"
                description="信息由后台生成，不可修改，若无数据，请先登录"
                :closable="false"
                :center="true"
                :show-icon="false"
                effect="dark"
              />
            </div>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-divider direction="horizontal" />
        </div>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="产品名称：" prop="proName" class="label-center-align">
              <el-input v-model="formData1.proName" :disabled="true" type="text" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="9" :offset="3" class="grid-cell">
            <el-form-item label="产品溯源码：" prop="proId" class="label-center-align">
              <el-input v-model="formData1.proId" :disabled="true" type="text" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="库存重量：" prop="weight">
              <el-input v-model="formData1.weight" :disabled="true" type="text" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="生产日期:" prop="proBrith" class="label-center-align">
              <el-input v-model="formData1.proBrith" :disabled="true" type="text" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="保质期：" prop="expiration" class="label-center-align">
              <el-input v-model="formData1.expiration" :disabled="true" type="text" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="static-content-item">
          <el-alert
            title="请仔细输入并核对出库信息"
            type="warning"
            description="提交成功质检员将不可修改"
            :closable="false"
            :center="true"
            :show-icon="false"
            effect="dark"
          />
        </div>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <div class="static-content-item">
              <el-divider direction="horizontal" />
            </div>
            <el-form-item label="物流批次码：" prop="productCode" class="required label-center-align">
              <el-input v-model="formData1.productCode" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="源产地：" prop="productSource" class="required">
              <el-input v-model="formData1.productSource" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="出库重量：" prop="outWeight" class="required">
              <el-input v-model="formData1.outWeight" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="1" class="grid-cell">
            <el-form-item label="出库负责人：" prop="outCharge" class="required">
              <el-input v-model="formData1.outCharge" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2" class="grid-cell">
            <el-form-item label="入库负责人：" prop="inCharge" class="required">
              <el-input v-model="formData1.inCharge" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="运输目的地：" prop="destination" class="required">
              <el-input v-model="formData1.destination" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="承运公司：" prop="transporter" class="required">
              <el-input v-model="formData1.transporter" type="text" placeholder="必填" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" :offset="1" class="grid-cell">
            <el-form-item label="备注：" prop="note">
              <el-input v-model="formData1.note" type="textarea" placeholder="选填" rows="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="display: flex;justify-content: flex-end; margin-bottom: 10%">
        <el-button @click="login">登 录</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import request from '@/request'

export default {
  name: 'QualityAdd',
  data() {
    return {
      dialogFormVisible: true,
      isLogin: false,
      formData: {
        uName: '',
        uKey: ''
      },
      firmId: '', // 租户id
      proCode: '', // 需要二维码传
      rules: {
        uName: [{
          required: true,
          message: '名字不可为空'
        }],
        uKey: [{
          required: true,
          message: '口令不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '请检查输入'
        }]
      },
      formData1: {
        proName: '',
        proId: '',
        weight: '',
        proBrith: '',
        expiration: '',
        productCode: '',
        productSource: '',
        outWeight: '',
        outCharge: '',
        inCharge: '',
        destination: '',
        transporter: '',
        note: ''
      },
      rules1: {
        productCode: [{
          required: true,
          message: '物流批次码不可为空'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          trigger: ['blur', 'change'],
          message: '请填写正确的批次码'
        }],
        productSource: [{
          required: true,
          message: '原产地不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '请填写正确的源产地'
        }],
        outWeight: [{
          required: true,
          message: '出库重量'
        }, {
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: '仅能为数子'
        }],
        outCharge: [{
          required: true,
          message: '出库负责人不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '请检查姓名'
        }],
        inCharge: [{
          required: true,
          message: '入库负责人不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        destination: [{
          required: true,
          message: '运输目的地不可为空'
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: '检查输入'
        }],
        transporter: [{
          required: true,
          message: '承运公司不可为空'
        }]
      }
    }
  },
  created() {
    this.getRequest()
  },
  mounted() {
    this.getRequest()
  },
  methods: {
    load() {
      request.get('/productInfo/findById/', {
        params: {
          id: this.proCode,
          tenantId: this.firmId
        }
      }).then(res => {
        if (res.code === 20000) {
          this.formData1.proName = res.data[0].proName
          this.formData1.proId = res.data[0].comId
          this.formData1.weight = res.data[0].weight
          this.formData1.proBrith = res.data[0].proBrith
          this.formData1.expiration = res.data[0].expiration
          this.$message({
            type: 'success',
            message: '产品信息加载完毕'
          })
          console.log(this.formData1)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    confirm() {
      if (this.isLogin === false) {
        this.$message({
          type: 'warning',
          message: '请点击登录按钮进行身份核验'
        })
        return
      }

      this.$confirm('即将上传此次出库质检记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'msg-box'
      }).then(() => {
        this.$refs['vForm1'].validate(valid => {
          if (!valid) {
            this.$message({
              type: 'warning',
              message: '警告：请检查填写信息'
            })
            return
          }
          request.get('/productLog/add', {
            params: {
              productName: this.formData1.proName,
              productId: this.formData1.proId,
              productCode: this.formData1.productCode,
              productWeight: this.formData1.outWeight,
              productSource: this.formData1.productSource,
              outCharge: this.formData1.outCharge,
              destination: this.formData1.destination,
              inCharge: this.formData1.inCharge,
              productBirth: this.formData1.proBrith,
              expiration: this.formData1.expiration,
              transporter: this.formData1.transporter,
              note: this.formData1.note,
              tenantId: this.firmId
            }
          }).then((res) => {
            if (res.code === 20000) {
              this.isLogin = false
              this.$refs['vForm1'].resetFields()
              this.$message({
                type: 'success',
                message: '出库成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    login() {
      this.dialogFormVisible = true
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['vForm'].resetFields()
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) {
          this.$message({
            type: 'warning',
            message: '请检查填写信息'
          })
          return
        }
        // TODO: 提交表单
        request.get('/user/quality', {
          params: {
            uName: this.formData.uName,
            uKey: this.formData.uKey
          }
        }).then(res => {
          if (res.code === 20000) {
            this.dialogFormVisible = false
            this.isLogin = true
            this.firmId = res.data
            console.log(res.data)
            this.load()
            this.$message({
              type: 'success',
              message: '识别成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      })
    },
    getRequest() {
      const url = window.location.href // 获取url中"?"符后的字串
      const tmp = url.split('=')[1]
      console.log('url: ' + tmp)
      this.proCode = tmp
    }
  }
}
</script>
<style>
.msg-box {
  width: 80%;
}
@media screen and (min-width: 768px) {
  .msg-box {
    width: 420px;
  }
}
</style>
<style lang="scss">
.winClass{
  width: 20%;
}
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
